import { reactive, toRefs, ref } from 'vue'
import { Message as message } from '@arco-design/web-vue'

/**
 * 新增、编辑弹窗mixin
 * @mixin  labelCol         form表单label设置
 * @mixin  wrapperCol       form表单wrapper设置
 * @mixin  visible          控制modal显示
 * @mixin  confirmLoading   提交按钮load状态
 * @mixin  modalType        modal类型，add: 添加; edit: 编辑
 *
 * @param   {fn}  callback  回调函数，切换分页后回调
 */
export default function getModalMixin() {
  // 参数
  const mixinDef = reactive({
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 }
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 }
    },
    visible: false,
    confirmLoading: false,
    modalType: 'add'
  })
  const formRef = ref()

  /**
   * 关闭弹窗
   */
  const handleCancel = () => {
    mixinDef.confirmLoading = false
    mixinDef.modalType = 'add'
    formRef.value && formRef.value.resetFields()

    setTimeout(() => {
      mixinDef.visible = false
    }, 50)
  }

  return {
    ...toRefs(mixinDef),
    formRef,
    message,
    handleCancel
  }
}
